<template>
  <common-echarts :option="option" ref="echarts" :height="600"></common-echarts>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "SunburstEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "A",
          children: [
            {
              name: "A1",
              value: 15,
              children: [
                { name: "A11", value: 2 },
                { name: "A12", value: 5 },
                { name: "A13", value: 4 },
              ],
            },
            {
              name: "A2",
              value: 10,
              children: [
                { name: "A21", value: 2 },
                { name: "A22", value: 5 },
              ],
            },
          ],
        },
        {
          name: "B",
          children: [
            {
              name: "B1",
              children: [
                { name: "B11", value: 2 },
                { name: "B12", value: 1 },
              ],
            },
          ],
        },
      ];

      return {
        title: {
          text: "各项层级以及所占比列",
          subtext: "旭日图是饼图的进化版",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        //   formatter: "{a} <br />{b}: {c}%",
        },
        series: {
          type: "sunburst",
          data: series,
          radius: [0, "90%"],
          label: {
            rotate: "radial",
          },
        },
      };
    },
  },
  data() {
    return {};
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
